<template>
  <div>
    <!-- 修改Dialog -->
    <div>
      <el-dialog
        :title="myTitle"
        :visible.sync="dialogFormVisible"
        @close="closeDialog"
      >
        <el-form
          ref="employeeModify"
          :model="employeeModify"
          label-width="80px"
        >
          <el-form-item label="员工编号">
            <el-input v-model="employeeModify.eid" disabled></el-input>
          </el-form-item>
          <el-form-item label="员工姓名">
            <el-input v-model="employeeModify.ename"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="employeeModify.gender">
              <el-radio label="true">男</el-radio>
              <el-radio label="false">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="性别str">
            <el-radio-group v-model="employeeModify.genderstr">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="部门">
            <el-select
              v-model="employeeModify.department.did"
              clearable
              placeholder="请选择部门"
            >
              <el-option
                v-for="item in departments"
                :key="item.did"
                :label="item.dname"
                :value="item.did"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="doEmployeeModify">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 条件查询 -->
    <div>
      <el-form
        ref="employee"
        :model="employee"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="员工姓名">
          <el-input v-model="employee.ename"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="employee.gender">
            <el-radio label="true">男</el-radio>
            <el-radio label="false">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门">
          <el-select
            v-model="employee.department.did"
            clearable
            placeholder="请选择部门"
          >
            <el-option
              v-for="item in departments"
              :key="item.did"
              :label="item.dname"
              :value="item.did"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getEmployees">查询</el-button>
          <el-button type="primary" @click="addEmployee">新增</el-button>
          <el-button type="primary" @click="removeBatch">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 员工列表 -->
    <div>
      <el-table
        :data="pageBean.beanList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="ename" label="姓名" width="180">
        </el-table-column>
        <!-- <el-table-column prop="gender" label="gender" width="180">
        </el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            {{ scope.row.gender }}
            <span v-if="scope.row.gender">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column prop="genderstr" label="genderstr"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="birthdate" label="生日"> </el-table-column>
        <el-table-column prop="department.dname" label="部门">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageBean.pageIndex"
        :page-sizes="[1, 2, 3, 10]"
        :page-size="pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
      myTitle: "",
      dialogFormVisible: false,
      pageIndex: 1,
      pageSize: 10,
      pageBean: {},
      employee: {
        department: { did: null },
      },
      employeeModify: {
        department: { did: null },
      },
      departments: [],
    };
  },
  created() {
    this.getEmployees();
    this.getAllDepartments();
  },
  methods: {
    //批量删除
    removeBatch(){
      if(this.multipleSelection.length==0){
        this.$message('先选择');
      }else{
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //发送请求后端执行删除
          // let eids="?";
          // for(let i=0;i<this.multipleSelection.length;i++){
          //     eids+="eids="+this.multipleSelection[i].eid+"&"
          // }
          // console.log(eids);

          let eids=[];
          for(let i=0;i<this.multipleSelection.length;i++){
              eids.push(this.multipleSelection[i].eid);
          } 
          this.$axios
            // .get("http://localhost:8080/employee/removebatch/"+eids)
            .post("http://localhost:8080/employee/removebatch2/",{eids})
            .then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
              //重新查询员工，展示页面
            });
        })
        .catch(() => {});
      }
      
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //Dialog 关闭的回调
    closeDialog() {
      this.employeeModify = { department: { did: null } };
    },
    //查询员工
    getEmployees() {
      // console.log("查询条件：" + JSON.stringify(this.employee));
      this.$axios
        .post(
          "http://localhost:8080/employee/get/" +
            this.pageIndex +
            "/" +
            this.pageSize,
          this.employee
        )
        .then((resp) => {
          this.pageBean = resp.data.data;
        });
    },
    //查询所有部门
    getAllDepartments() {
      this.$axios
        .get("http://localhost:8080/department/get/all")
        .then((resp) => (this.departments = resp.data.data));
    },
    //跳转新增页面
    addEmployee() {
      // this.$router.push("/employeeAdd");
      this.dialogFormVisible = true;
      this.myTitle = "新增员工";
    },
    //编辑事件
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.myTitle = "编辑员工";
      // this.employee=row;
      this.employeeModify = { ...row }; //
      this.employeeModify.gender = this.employeeModify.gender + "";
      // this.$router.push("/employeeModify/"+row);
      // this.$router.push({path:"/employeeModify/"+row.eid});
      // this.$router.push({ name: "employeeModify", params: { eid: row } });
      // this.$router.push({ path: '/employeeModify', query: { eid: row.eid } })
    },
    //删除事件
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //发送请求后端执行删除
          this.$axios
            .get("http://localhost:8080/employee/remove/" + row.eid)
            .then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
              //重新查询员工，展示页面
            });
        })
        .catch(() => {});
    },
    //分页事件，页大小改变
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getEmployees();
    },
    //分页事件，当前页改变
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getEmployees();
    },
    //当前页面执行编辑或者添加
    doEmployeeModify() {
      if (this.myTitle == "新增员工") {
        this.$axios
          .post("http://localhost:8080/employee/add", this.employeeModify)
          .then((resp) => {
            this.$message("添加成功:" + resp.data.data);
            this.dialogFormVisible = false;
            this.getEmployees(); //修改成功，重新查询，页面重新加载
          });
      } else {
        this.$axios
          .post("http://localhost:8080/employee/modify", this.employeeModify)
          .then((resp) => {
            this.$message("修改成功:" + resp.data.data);
            this.dialogFormVisible = false;
            this.getEmployees(); //修改成功，重新查询，页面重新加载
          });
      }
    }
  },
};
</script>

<style>
/* .el-form-item{
    line-height: 40px;
  } */
.el-form {
  text-align: left;
}
</style>